<template>
    <div class="gray-body w750" :style="{'--themescolor': themes.color}">
        <div class="submit-order">
            <div class="submit-list">
                <div class="submit-con">
                    <div class="pro-mes clearfix">
                        <div class="pro-img">
                            <legend-image :pic="contant.pic" :options="{w:'120',h:'120'}" :class="'needsclick'"  />
                        </div>
                        <div class="pro-name">
                            <div class="name">{{contant.prodName}}</div>
                            <div class="sku" v-if="contant.attribute">{{contant.attribute}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <template v-if="contant.alreadyActivated">
            <div class="warrantyCard-content">
                
                <div class="item">
                    <span class="item-span">客户姓名</span>
                    <span class="item-tip">{{customerName}}</span>
                </div>
                <div class="item">
                    <span class="item-span">客户年龄</span>
                    <span class="item-tip">{{customerAge}}</span>
                </div>
                <div class="item">
                    <span class="item-span">客户性别</span>
                    <span class="item-tip">{{customerAge == '1' ? '男': '女'}}</span>
                </div>
                <div class="item">
                    <span class="item-span">客户电话</span>
                    <span class="item-tip">{{customerPhone}}</span>
                </div>
                <div class="item">
                    <span class="item-span">客户地址</span>
                    <span class="item-tip">{{addressStr}}</span>
                </div>
                <div class="item">
                    <span class="item-span">详细地址</span>
                    <span class="item-tip">{{houseAddress}}</span>
                </div>
                <div class="item">
                    <span class="item-span">质保状态</span>
                    <span class="item-tip"><template v-if="warrantyCardStatus == 'activated'">激活</template><template v-if="warrantyCardStatus == 'inActivated'">未激活</template><template v-if="warrantyCardStatus == 'expired'">过期</template>
                    </span>
                </div>
                <div class="item">
                    <span class="item-span">激活时间</span>
                    <span class="item-tip">{{activationTime | dateformat('YYYY-MM-DD HH:mm:ss')}}</span>
                </div>
                <div class="item">
                    <span class="item-span">过期时间</span>
                    <span class="item-tip">{{expiredTime | dateformat('YYYY-MM-DD HH:mm:ss')}}</span>
                </div>
            </div>
        </template>
        <template v-else>
            <div class="warrantyCard-content">
                <div class="item">
                    <span class="item-span">客户姓名</span>
                    <input type="text" class="item-inp" placeholder="请输入您的姓名" v-model="customerName" />
                </div>
                <div class="item">
                    <span class="item-span">客户年龄</span>
                    <input type="text" class="item-inp"  maxlength="3" placeholder="请输入您的年龄" v-model="customerAge"  v-Int />
                </div>
                <div class="item">
                    <span class="item-span">客户性别</span>
                    <van-radio-group v-model="radio">
                        <van-radio name="man" :checked-color="themes.color" icon-size="16">男</van-radio>
                        <van-radio name="girl" :checked-color="themes.color" icon-size="16">女</van-radio>
                    </van-radio-group>
                </div>
                <div class="item">
                    <span class="item-span">客户电话</span>
                    <input type="text" class="item-inp"  placeholder="请输入您的电话" v-model="customerPhone" />
                </div>
                <div class="item" @click="selectArea">
                    <span class="item-span">客户地址</span>
                    <input type="text" class="item-inp text-ellipsis"  disabled :value="addressStr" placeholder="请选择您的地址" />
                </div>
                <div class="item">
                    <span class="item-span">详细地址</span>
                    <input type="text" maxlength="255" class="item-inp"  placeholder="请输入您的详细地址" v-model="houseAddress" />
                </div>
            </div>
            <div  class="b-btn" :class="themes.name">
                <a  href="javascript:;" class="btn-r" @click="save">保存</a>
            </div>

            
            <address-select v-model="addressShow" title="选择地址" mode="code"  @confirm="onAddress" :defaultValue="defaultValue" />

            
        </template>

    </div>
</template>

<script>
import legendImage from 'components/legendImage/legendImage';
import addressSelect from "components/addressSelect/addressSelect"
import {mapState} from 'vuex'
import { warrantyCardActivated , warrantyCardDetail,toActivated} from "api/order";
import formCheck from 'utils/formCheck';
export default {
    components: {
        legendImage,
        addressSelect
    },
    computed: {
        ...mapState(['themes']),
    },
    data () {
        return {
            contant: {},
            subNum: '', //订单
            radio: 'man',
            
            selectIndex:0,
            //地址拼接  
            addressStr: '', 
            //存id做比较
            keyId: [], 

            defaultValue: [],
            addressShow: false,

            customerName: '',
            customerAge: '',
            customerPhone: '',
            expiredTime: '',
            activationTime: '',
            customerGender: '',
            warrantyCardStatus: '',

            houseAddress: "", //详细地址
        }
    },
    mounted() {
      
    
        this.subNum =  this.$route.query.subNum
        this.contant = JSON.parse(this.$route.query.contant)


        //alreadyActivated 是否已经激活  
        //TODO 等下回来修改
        !this.contant.alreadyActivated && (this.loadtoActivated())

        //查看
        this.contant.alreadyActivated && warrantyCardDetail({orderItemId: this.contant.subItemId,source: "H5"}).then(res => {
            if (!res.success) {
                this.$toast(res.msg)
                return
            }

            const {result} = res

            this.customerName = result.customerName,
            this.customerAge = result.customerAge,
            this.customerPhone = result.customerPhone,
            this.expiredTime = result.expiredTime,
            this.activationTime = result.activationTime,
            //TODO
            this.addressStr =  (res.result.province && res.result.city && res.result.area ) ? `${res.result.province || ''} ${res.result.city || ''} ${res.result.area || ''} ${res.result.town || ''}`: res.result.bigAddress
            this.customerGender = result.customerGender
            this.warrantyCardStatus = result.status
            this.bigAddress = result.bigAddress
            this.houseAddress = result.detailAddress
        })
    },
    methods: {


        //第一次激活后，回显的地址
        loadtoActivated() {
            toActivated({source: "H5"}).then(res => {
                if (res.status == 1) {
                    if (res.result) {
                        this.customerName = res.result.customerName
                        this.customerAge = res.result.customerAge
                        this.radio = res.result.customerGender == 1 ? 'man' : 'girl'
                        this.customerPhone = res.result.customerPhone
                        //TODO
                        this.addressStr =  (res.result.province && res.result.city && res.result.area) ? `${res.result.province || ''} ${res.result.city || ''} ${res.result.area || ''} ${res.result.town || ''}`: ''
                        this.houseAddress = res.result.detailAddress
                        this.keyId = [res.result.provinceId,res.result.cityId,res.result.areaId]

                        this.defaultValue = [
                            {name: res.result.province, key:res.result.provinceId},
                            {name: res.result.city, key:res.result.cityId},
                            {name: res.result.area, key:res.result.areaId},
                            {name: res.result.town, key:res.result.townId},
                            // {name: res.result.province, key:data.bankTownCode},
                        ]
                    }
                }
            })
        },

        

        
        
        
        //选择地址
        selectArea() {
            this.addressShow = true
        },

        onAddress(event) {
            this.addressStr = event.addressStr
            this.keyId = event.keyId
        },

       
       

        

        //保存
        save() {
			let that = this
			const {prodName,prodId,subItemId} = this.contant
			const {customerName,customerPhone,customerAge, radio , keyId,subNum , addressStr , houseAddress} = this
			
			let errorMsg = formCheck.isNonEmpty(this.customerName, '请输入您的姓名') || 
			    formCheck.isNonEmpty(this.customerAge, '请输入您的年龄') ||  
			    formCheck.phoneRight(this.customerPhone, '请输入正确的手机号码') || 
			    formCheck.isNonEmpty(this.surePwd, '请再次输入密码') ||
			    formCheck.isNonEmpty(this.addressStr, '请选择地址') || 
			    formCheck.isNonEmpty(this.houseAddress, '请输入详细地址') 
			if (errorMsg) {
			    this.$toast(errorMsg);
			    return 
			}
			this.$utils.uDebounce(() => {
				let that = this
				const {prodName,prodId,subItemId} = this.contant
				const {customerName,customerPhone,customerAge, radio , keyId,subNum , addressStr , houseAddress} = this
			
				let addressStrArr = addressStr.split(" ")
				
				let params = {
				    source: "H5",
				    prodName,
				    prodId,
				    orderItemId: subItemId,
				    customerName,
				    customerPhone,
				    customerAge,
				    customerGender: radio == 'man' ? '1' : '0',
				    provinceId: keyId[0],
				    cityId: keyId[1],
				    areaId: keyId[2],
				    townId: keyId[3],
				    detailAddress: houseAddress,
				    orderNo:subNum,
				    province: addressStrArr[0],
				    city: addressStrArr[1],
				    area: addressStrArr[2],
				    town: addressStrArr[3],
				}
				
				
				
				
				warrantyCardActivated(params).then(res => {
				    if (res.status != 1) {
				        this.$toast(res.msg)
				        return
				    }
				    const {result} = res
				
				    this.$toast({
				        message: '激活成功',
				        
				    });
				
				    setTimeout(() => {
				        this.goback()
				    },1500)
				
				
				})
			})
            
        },
        goback() {
            this.$router.back();
            this.$router.isBack = true
        },
    }
}
</script>

<style lang="stylus" scoped>
.submit-order {
    padding-bottom: 0px;
    .submit-list {
        .submit-con {
            background: #ffffff;
            padding: 0 10px;
            .pro-mes {
                border-top: 1px solid #f8f8f8;
                position: relative;
                padding: 13px 0;
                display: flex;
                &:first-child {
                    border: 0;
                }
                .pro-img {
                    width: 60px;
                    height: 60px;
                    overflow: hidden;
                    cursor: pointer;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .pro-name {
                    font-size: 14px;
                    margin-left: 10px;
                    position: relative;
                    height: 60px;
                    flex: 1;
                    .name {
                        max-height: 36px;
                        overflow: hidden;
                        line-height: 18px;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        text-overflow: ellipsis;
                        word-break: break-all;
                        font-family: -apple-system, Helvetica, sans-serif;
                    }
                    .sku {
                        color: #999;
                        display: block;
                        line-height: 14px;
                        margin-top: 5px;
                        font-size: 12px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }
        }
    }
}

.warrantyCard-content {
    background: #ffffff;
    padding: 0 10px;
    margin-top: 10px;
    .item {
        line-height: 24px;
        border-bottom: 1px solid #f8f8f8;
        font-size: 14px;
        position: relative;
        padding: 10px 0;
        display: flex;
        flex-flow: row;
        &:last-child {
            border-bottom: none;
        }
        .item-span {
            display: block;
            width: 70px;
            flex: 0 0 70px;
            line-height: 24px;
            color: #888;
        }
        .item-tip {
            color: #999;
            font-size: 12px;
            margin-left: 10px;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .item-inp {
            width: 100%;
            margin-left: 10px;
            background:transparent;
        }

    }
}
.van-radio-group {
    width: 100%;
    display: flex;
    align-items: center;
    .van-radio {
        margin-left: 10px;
    }
}






</style>